<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">

	</style>
</head>

<body>
	<p id="second_watch">00:00:00</p>
	<p>
		<input id="time_start" type="button" value="开始" onclick="time_start()" />
		<input type="button" value="停止" onclick="time_stop()" />
		<input type="button" value="重置" onclick="time_reset()" />
	</p>
	<script>
		var i1 = 0; //分钟第一位
		var i2 = 0; //分钟第二位
		var s1 = 0; //秒第一位
		var s2 = 0; //秒第二位
		var ms1 = 0; //百分秒第一位
		var ms2 = 0; //百分秒第二位
		var t; //计时函数保存
		function time_start() {
			document.getElementById("time_start").disabled = "true"; //开始后使开始按钮失效，防止多次点击计时加快的bug
			ms2++; //只需百分秒最后一位自加，前面依次进位
			if (ms2 > 9) {
				ms2 = 0;
				ms1++;
			}
			if (ms1 > 9) {
				ms1 = 0;
				s2++;
			}
			if (s2 > 9) {
				s2 = 0;
				s1++;
			}
			if (s1 > 5) {
				s1 = 0;
				i2++;
			}
			if (i2 > 9) {
				i2 = 0;
				i1++;
			}
			if (i1 > 5) {
				//超出秒表计数范围
				clearTimeout(t);
				return false;
			}
			document.getElementById("second_watch").innerHTML = "" + i1 + i2 + ":" + s1 + s2 + ":" + ms1 + ms2 + "";
			document.getElementById("second_watch").style.color = "black";
			t = setTimeout("time_start()", 10); //百分秒百分之一秒执行一次
		}

		function time_stop() {
			clearTimeout(t);
			document.getElementById("second_watch").style.color = "red";
			document.getElementById("time_start").disabled = ""; //停止时恢复按钮功能
		}

		function time_reset() {
			clearTimeout(t);
			i1 = 0;
			i2 = 0;
			s1 = 0;
			s2 = 0;
			ms1 = 0;
			ms2 = 0;
			document.getElementById("second_watch").innerHTML = "" + i1 + i2 + ":" + s1 + s2 + ":" + ms1 + ms2 + "";
			document.getElementById("second_watch").style.color = "black";
			document.getElementById("time_start").disabled = "";
		}
	</script>
</body>

</html>